<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="icon " href="icon/favicon.ico">

    <!--css代码-->
    <link href="css/market.css" rel="stylesheet" type="text/css">
    <!--jquery库-->
    <script src="js/jquery-3.3.1.js"></script>
    <!--js代码-->
    <script src="js/common.js" type="text/javascript"></script>
</head>
<body>
<div class="headerBar">
    <div class="topBar">
        <div class="comWidth">
            <div class="leftArea">
                <a  href="login.html" class="link-login">您好，请登录</a>&nbsp;&nbsp;
                <a href="registe.html" class="link-regist style-red">免费注册</a>
            </div>
            <div class="rightArea">

                <ul class="fr">
                    <span class="fore1" ><a target="_blank" href="shopcar.html" style="text-align: center"><img class='shopCar' src="icon/shopCar.png">购物车</a></span>
                    <span class="fore1" ><a target="_blank" href="order.html">我的订单</a></span>
                    <span class="fore1" ><a href="account.html">个人中心</a></span>
                </ul>
            </div>
        </div>
    </div><!--topBar结束-->
</div>
<div style="height: 100px ;width: 100%; text-align: center; line-height: 100px; overflow: auto; background-color: #1D7AD9; opacity: 0.8">
    <h1>欢迎登录</h1>
</div>


<div class="regBox">
    <div class="login_cont">
        <ul class="login">
            <li><span class="reg_item"><i>*</i>手机号码:</span><div class="input_item"><input class='reginput'type="text" id="name" autofocus autocomplete="off" placeholder="请输入11位手机号码"/></div></li>
            <li><span class="reg_item"><i>*</i>请输入密码:</span><div class="input_item"><input class='reginput' type="text" id="userpwd" placeholder="请输入6-16位密码"/></div></li>
            <!--<li><span class="reg_item"><i>*</i>请确认密码:</span><div class="input_item"><input class='reginput' type="text" id="pwdagain" placeholder="请再次输入密码"/></div></li>-->
            <!--<li><span class="reg_item"><i>*</i>收货地址:</span><div class="input_item"><input type="text" id="address"/></div></li>-->
            <li></li>
            <div class="input-item"><input type="button" value="登录" id="loginbutton"  /></div>
            <!--<input type="button" value="注册" class="regbutton"/>-->
        </ul>
    </div>
</div>





<div class="back-to-top" style="display:none"><a>返回<br />顶部</a></div>

<div class="footer">
    <p><a href="#">网站简介</a><i>|</i><a href="#">公告</a><i>|</i> <a href="#">招纳贤士</a><i>|</i> <a href="#">联系我们</a><i>|</i>客服热线：400-675-1234</p>
    <p>Copyright &copy; 2007 - 2018 版权所有&nbsp;&nbsp;&nbsp;京ICP备09037834号&nbsp;&nbsp;&nbsp;京ICP证B1034-8373号&nbsp;&nbsp;&nbsp;某市公安局XX分局备案编号：123456789123</p>
</div>
</body>
</html>

<script>
    function validateForm(){
        var username= Document.getElementById("#name").val();
        var password= Document.getElementById("#userpwd").val();
        if(username==null || username== ""){
            alert("请输入用户名！");
        }
        if(password== null || password== ""){
            alert("请输入密码！");
            return false;
        }
    }

    $("#loginbutton").click(function () {
        var username= $('#name').val();
        var pwd= $('#userpwd').val();
        var $warning1= $("<span id='namespan'style='color: red'>用户名格式错误!</span>");
        var $warning2= $("<span id='pwdspan' style='color: red'>密码格式错误！</span>");
        var $warning3= $("<span id='loginfail' style='color: red'>密码输入错误</span>")
        $('#namespan').remove();
        $('#pwdspan').remove();
        $('#loginfail').remove();

        if(!(/^1[34578]\d{9}$/.test(username))){
            $('#name ').after($warning1);
            $('#name').focus();
        }
        else {var flag1=1;}
        if(!(/^[a-zA-Z0-9]{6,11}$/).test(pwd)){
            $('#userpwd').after($warning2);
            $('#userpwd').focus();
        }
        else{var flag2=1;};

        if($('#namespan').length){
            $('#name').focus();
        }
        else {
            if($('#pwdspan').length){
                $('#userpwd').focus()
            }
        }
        if((flag1+flag2)!='2'){
            return false;
        }
        else{
            $.ajax({
                url:'login.json',//相对应的esb接口地址
                type:'post',
                data:{"username":username,"password":pwd},//向服务器（接口）传递的参数
                success:function(data){//服务器（接口）返回来的数据
                    if(data.password==123456){//如果返回来的信息说明提交的信息为正确的
                        var he= $('.login').height()
                        $('.login').hide()
                        $('.regBox').append('<div id="divnew" style="height: 256px; text-align: center; overflow: auto; line-height: 256px"><p style="color: red">登录成功即将跳转至首页</p></div>')
                         var name= $('#name').val();
                        sessionStorage.setItem("name",name)
                        setTimeout(function () {
                            location=document.referrer;
                            // window.location.href='index.html';//正确登录后页面跳转至
                        },1500)

                    }
                    else{//如果返回来的信息说明提供的信息为错误的
                        $('#userpwd').val("");
                        $('#userpwd').after($warning3);
                    }
                }
            })
        }
    });
    $('#name').keyup(function () {
        $('#namespan').remove();
    })
    $('#userpwd').keyup(function () {
        $('#pwdspan').remove();
    })
</script>